<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module">
      import {
        provide,
        inject,
        ref,
        defineAsyncComponent,
        getCurrentInstance,
        onMounted,
        onUpdated,
        onUnmounted,
        reactive,
        toRefs,
        Text,
        createVNode,
        h,
        render,
        Fragment,
        computed,
      } from "../js/runtime-dom/index.js";

      // import {
      //   defineAsyncComponent,
      //   onMounted,
      //   onUpdated,
      //   onUnmounted,
      //   Text,
      //   Fragment,
      //   createVNode,
      //   render,
      //   h,
      //   proxyRefs,
      //   toRefs,
      //   reactive,
      //   effect,
      //   watch,
      //   watchEffect,
      //   computed,
      //   ref,
      //   toRef,
      //   createRenderer,
      // } from "../js/vue.esm-browser.prod.js";

      let ChildComponent = {
        setup() {
          const name = inject("key");
          const aa = inject("aa", "1234");
          return () => {
            return h("div", name.value + aa);
          };
        },
      };

      let ParentComponent = {
        setup() {
          const name = ref("jw");
          provide("key", name);
          return () => {
            return h(ChildComponent);
          };
        },
      };

      render(h(ParentComponent), app);
    </script>
  </body>
</html>
